<%--
  Created by IntelliJ IDEA.
  User: last
  Date: 2025/5/20
  Time: 17:34
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机票取票</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/ticketCollection.css">
    <script>
        function selectRow(row) {
            const rows = row.parentNode.children;
            for (let i = 0; i < rows.length; i++) {
                rows[i].style.backgroundColor = '';
            }
            row.style.backgroundColor = '#e2e8f0';
            const tableId = row.closest('table').id;
            if (tableId === 'ticketTable') {
                document.getElementById('selectedTicketData').value = JSON.stringify(Array.from(row.cells).map(cell => cell.textContent));
            }
        }
    </script>
</head>
<body>
<%@ include file="userNavbar.jsp" %>

<div class="collection-container mt-16">
    <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">机票取票</h1>
    <div class="w-full">
        <h3 class="text-xl font-bold text-gray-800 mb-3">可取票机票</h3>
        <table class="min-w-full divide-y divide-gray-200" id="ticketTable">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户ID</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">座位</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单状态</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起飞时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">到达时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起飞站</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">到达站</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登机时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">席别</th>
                </tr>
            </thead>
            <tbody id="ticketTableBody" class="bg-white divide-y divide-gray-200">
                <!-- 机票数据将通过 JavaScript 动态填充 -->
            </tbody>
        </table>
    </div>
    <div class="w-full mt-4">
        <h3 class="text-xl font-bold text-gray-800 mb-3">未支付与已取票机票</h3>
        <table class="min-w-full divide-y divide-gray-200" id="unavailableTicketTable">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户ID</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">座位</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单状态</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起飞时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">到达时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起飞站</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">到达站</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登机时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">席别</th>
                </tr>
            </thead>
            <tbody id="unavailableTicketTableBody" class="bg-white divide-y divide-gray-200">
                <!-- 机票数据将通过 JavaScript 动态填充 -->
            </tbody>
        </table>
    </div>
    <form action="TicketCollectionServlet" method="post">
        <input type="hidden" id="selectedTicketData" name="selectedTicketData">
        <button type="submit" class="w-full btn-submit mt-4">提交取票</button>
    </form>
    <% if (request.getAttribute("success") != null && (boolean) request.getAttribute("success")) { %>
    <p class="success-message">取票成功！</p>
    <% } %>
    <a href="userMain.jsp" class="block mt-4 text-center nav-btn">返回用户主界面</a>
</div>
<script>
    window.onload = function() {
        // 加载机票表数据
        const xhrTicket = new XMLHttpRequest();
        xhrTicket.open('GET', 'GetTicketsServlet', true);
        xhrTicket.onreadystatechange = function() {
            if (xhrTicket.readyState === 4 && xhrTicket.status === 200) {
                const response = JSON.parse(xhrTicket.responseText);
                const availableTableBody = document.getElementById('ticketTableBody');
                const unavailableTableBody = document.getElementById('unavailableTicketTableBody');
                availableTableBody.innerHTML = '';
                unavailableTableBody.innerHTML = '';

                response.tickets.forEach(ticket => {
                    const row = document.createElement('tr');
                    row.onclick = function() { selectRow(this); };
                    const cells = [
                        ticket.id,
                        ticket.oid,
                        ticket.uid,
                        ticket.seat,
                        ticket.state,
                        ticket.startTime,
                        ticket.endTime,
                        ticket.takeoffStation,
                        ticket.arrivalStation,
                        ticket.boardingTime,
                        ticket.position
                    ];
                    cells.forEach(value => {
                        const cell = document.createElement('td');
                        cell.textContent = value;
                        row.appendChild(cell);
                    });

                    if (ticket.state === '0' || ticket.state === '已取票') {
                        row.style.backgroundColor = '#f3f4f6';
                        unavailableTableBody.appendChild(row);
                    } else {
                        availableTableBody.appendChild(row);
                    }
                });
            }
        };
        xhrTicket.send();
    };
</script>
</body>
</html>
